<template>
	<view class="content column">
		<view class="justify-between pt20 header">
			<view @tap="createhistory">
				
			</view>
			<view @tap="copy">
				点击复制
			</view>
		</view>
		<view class="showResult">{{str}}</view>
		<view class="justify-between pt20 col">
			<view class="col-box center column">
				<text>最小数值</text>
				<input v-model="minNumber" type="number" />
			</view>
			<view class="col-box center column">
				<text>最大数值</text>
				<input v-model="maxNumber" type="number" />
			</view>
		</view>
		<view class="justify-between pt20 col">
			<view class="col-box center column">
				<text>生成个数</text>
				<input v-model="createNumber" type="number" />
			</view>
			<view class="col-box center column">
				<text>去重开关</text>
				<switch :checked="switchValue" @change="switchChange"></switch>
			</view>
		</view>

		<view class="btn center pt24">
			<view class="btn-submit">
				<button type="primary" plain="true" @click="create">生成</button>
			</view>
			<view class="btn-submitleft">
				<button type="warn" plain="true" @click="reset">重置</button>
			</view>
		</view>

	</view>
</template>
<script lang="ts">
	import { get } from '../../common/request';
	export default {
		data() {
			return {
				str: '请生成随机数',
				minNumber: 0,
				maxNumber: 10,
				createNumber: 1,
				switchValue: false,
			}
		},
		methods: {
			jump() {
				this.$goto('/pages/index/index')
			},
			//switch修改
			switchChange(e) {
				this.switchValue = e.detail.value;
			},
			//创建随机数
			async create() {
				let switch_value = 0;
				if (this.switchValue) {
					switch_value = 1;
				}
				let option = {
					minNumber: this.minNumber,
					maxNumber: this.maxNumber,
					createNumber: this.createNumber,
					switchValue: switch_value
				};
				const ret = await get('api/fakerdata', option);
				let arr : [] = ret.data;
				this.str = arr.join('-');
			},
			//重置
			reset() {
				this.str = '请生成随机数';
				this.minNumber = 0;
				this.maxNumber = 10;
				this.createNumber = 1;
				this.switchValue = false;
			},
			createhistory() {
				console.log('历史数据');
			},
			copy() {
				uni.setClipboardData({
					data: this.str
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 30px;
		color: #767676;
		font-size: 14px;
	}

	.showResult {
		height: 100px;
		width: 100%;
		border-radius: 5px;
		background-color: black;
		color: #ffffff;
		font-size: 24px;
		padding-top: 10px;
		// line-height: 100px;
		text-align: center;
		letter-spacing: 2px;
		word-break: break-all;
		overflow: hidden;
	}

	.btn {
		width: 100%;
		margin-top: 50px;

		&-submit {
			width: 120px;
			margin-right: 20px;
		}

		&-submitleft {
			width: 120px;
			margin-left: 20px;
		}
	}

	.col {
		width: 100%;
		height: 80px;

		&-box {
			padding: 10px;
			width: 150px;
			text-align: center;
			background-color: $uni-bg-color-grey;
			border-radius: 5px;

			>text {
				font-size: 14px;
				color: brown;
			}

			>input {
				font-size: 22px;
				margin-top: 10px;
				color: #ffffff;
				background-color: $uni-color-success;
				border-radius: 5px;
				height: 30px;
			}

			>switch {
				margin-top: 10px;
			}
		}
	}
</style>